import 'package:flutter/material.dart';

class MyApp16 extends StatelessWidget {
  const MyApp16({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. 提供的数据
    const Map orderInfo = {
      'createTime': "2024-08-15 21:49:48",
      'orderState': "待发货",
      'image':
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
      'totalNum': 2,
      'curPrice': 119.5,
      'attrsText': "规格: 白色240ml",
    };

    // 2. 创建ListView
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'ListView Example',
          style: TextStyle(color: Colors.red, fontSize: 30),
        ),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: ListView.separated(
        itemCount: 100,
        separatorBuilder: (BuildContext context, int index) =>
            const Divider(height: 10, color: Colors.grey),
        itemBuilder: (BuildContext context, int index) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                padding: const EdgeInsets.only(
                  top: 10,
                  bottom: 10,
                  left: 10,
                  right: 10,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('${orderInfo['createTime']}'),
                    Text(
                      orderInfo['orderState'],
                      style: TextStyle(color: Colors.orange),
                    ),
                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.only(
                  left: 10,
                  right: 10,
                  top: 10,
                  bottom: 10,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Image.network(orderInfo['image'], width: 100, height: 100),
                    SizedBox(width: 10),
                    Expanded(
                      flex: 1,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            orderInfo['name'],
                            style: TextStyle(fontSize: 16),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 5, bottom: 5),
                            child: Text(
                              orderInfo['attrsText'],
                              style: TextStyle(color: Colors.grey),
                            ),
                          ),
                          Text(
                            '￥${orderInfo['curPrice']}',
                            style: TextStyle(
                              color: Colors.red,
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(width: 10),
                    Container(
                      margin: const EdgeInsets.only(top: 10),
                      child: Text('X${orderInfo['totalNum']}'),
                    ),
                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
                width: MediaQuery.of(context).size.width,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('合计: ${orderInfo['curPrice']}'),
                    Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.red, width: 1),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      padding: const EdgeInsets.only(
                        top: 5,
                        bottom: 5,
                        left: 10,
                        right: 10,
                      ),
                      margin: const EdgeInsets.only(top: 10),
                      child: Text('再次购买'),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
